<template>
	<gui-page class="container">
		
		<view slot="gBody" class="body_">
			<view class="bnts">
				<view class="bnt-item">
					<view class="gui-bold">¥0元/0次</view>
					<view class="">秒搶總收益</view>
					<view class="line-color1"></view>
				</view>
				<view class="bnt-item">
					<view class="gui-bold gui-color-red">100</view>
					<view class="">當前點數</view>
					<view class="line-color2"></view>
				</view>
				<view class="bnt-item">
					<view class="gui-bold">¥0元/0次</view>
					<view class="">尾搶總收益</view>
					<view class="line-color1"></view>
				</view>
			</view>
			<view class="bnts">
				<view class="bnt-item2 bts1" @click="onBnt(1)">
					充值續費
				</view>
				<view class="bnt-item2 bts2" @click="onBnt(2)">
					清空记录
				</view>
			</view>

			<gui-speaker class="gui-box-title" :vertical="false" :items="speakerMsgs">
				<text slot="icon" class="gui-icons color-msg">&#xe656;</text>
			</gui-speaker>

			<view class="content">
				<gui-slide-list :msgs="dataList" ></gui-slide-list>
			</view>
		</view>
	</gui-page>
</template>

<script>
	import state from "@/config";
	export default {
		name: "index",
		data() {
			return {
				isLogin: !!state.isLogin(),
				userInfo: {},
				speakerMsgs: [],
				dataList: [],
			};
		},
		onShow() {},
		onLoad() {
			this.init();
		},
		methods: {
			check(){
				if(!this.isStart){
					this.isStart2=!this.isStart2;
				}
			},
			onsaoma(item){
				this.diqu = [
					{label:'安徽',value:'1'},
					{label:'安徽',value:'2'},
					{label:'安徽',value:'3'},
					{label:'安徽',value:'4'},
				]
			},
			getData() {
				uni.showLoading({
					title: "加载中",
				});
				//   this.$api.courseList({}, (e) => {
				// e = e || {};
				let e = {
					records: [
						{title:'xxxxxxx',content:'000000000fdfdfdf',id:1},
						{title:'xxxxxxx',content:'000000000fdfdfdf',id:2},
						{title:'xxxxxxx',content:'000000000fdfdfdf',id:3},
						{title:'xxxxxxx',content:'000000000fdfdfdf',id:4},
					],
				};
				uni.hideLoading();
				let demoArr = e.records || [];
				if (this.pageNum >= 2) {
					this.dataList = this.dataList.concat(demoArr);
				} else {
					this.dataList = [];
					this.dataList = demoArr;
				}
				//   });
				this.isRefresher = false;
			},

			onBnt(t) {
				switch (t) {
					case 1:
						this.$uni.navigate("/pages/magess/index");
						break;
					case 2:
						this.$uni.navigate("/pages/magess/index");
						break;
				}
			},

			init() {
				// 最新公告
				this.speakerMsgs = [{
						id: 1,
						title: "公告123发发士大夫额发的"
					},
					{
						id: 2,
						title: "公告123发发士大夫额发的"
					},
					{
						id: 3,
						title: "公告123发发士大夫额发的"
					},
					{
						id: 4,
						title: "公告123发发士大夫额发的"
					},
				];
				//   this.$api.newMessage(
				//     {
				//       pages: 1,
				//       size: 3,
				//     },
				//     (e) => {
				//       e = e || {};
				//       let res = e.records || [];
				//       this.speakerMsgs = res.map((item) => {
				//         let v = this.$uni.toDate(this.$uni.toTimeStamp(item.publishTime));
				//         return {
				//           id: item.id,
				//           title: item.title,
				//           url: `/pagesB/index/newsDetail?id=${item.id}`,
				//           opentype: "navigate",
				//           time: v[0] ? `${v[0]}/${v[1]}/${v[2]}` : "",
				//         };
				//       });
				//     }
				//   );

				// 获取用户信息
				//   if (state.storage(["user_info", "id"]))
				//     this.$api.getUseInfo({}, (e) => {
				//       e = e || {};
				//       let userInfo = state.storage(["user_info"]);
				//       this.userInfo = Object.assign({}, userInfo, e);
				//     });
				this.getData();
			},

			// 下拉刷新被触发
			refresherrefreshFun() {
				this.dataList = [];
				this.pageNum = 1;
				this.getData();
			},

			//上拉加载，页面滑动到底部加载分页数据
			scrolltolowerFun() {
				if (this.dataList.pages > this.pageNum) {
					this.pageNum = this.pageNum + 1;
					this.getData();
				}
			},

			refresherpullingFun() {
				this.isRefresher = true;
			},

			navigateTo({
				currentTarget: {
					dataset
				}
			}) {
				let nowisLogin = state.isLogin();
				let that = this;
				const {
					url,
					type,
					islogin
				} = dataset;
				if (islogin == "1" && !nowisLogin) {
					uni.showModal({
						title: "提示",
						content: "请先登录！",
						cancelText: "暂不登录",
						confirmText: "登录",
						cancelColor: "#BDBDBD",
						confirmColor: "#D33C30",
						success: function(res) {
							if (res.confirm) {
								uni.redirectTo({
									url: "/pages/login/login",
								});
							} else if (res.cancel) {
								uni.switchTab({
									url: "/index/indexs/index",
								});
							}
						},
					});
				} else {
					this.$uni.navigate(url, type);
				}
			},
		},
	};
</script>

<style scoped lang="less">
	.container {
		width: 100%;
		min-height: 100vh;
		background: url() no-repeat top right,
			url() no-repeat bottom left;
		background-color: #f9f9f9;
		max-width: 750rpx;
		margin: 0 auto;

		.body_ {
			padding-top: 20rpx;
		}
	}

	.gui-box-title {
		font-family: MicrosoftYaHei;
		font-size: 24rpx;
		color: #ff6010;
		padding: 10rpx 20rpx;
		margin: 20rpx 0;
		background-color: #fff9ed;

		.color-msg {
			margin-right: 10rpx;
		}
	}

	.bnts {
		display: flex;
		padding-left: 20rpx;
		margin-bottom: 40rpx;

		.bnt-item {
			margin-right: 20rpx;
			flex: 1;
			box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.3);
			border-radius: 16rpx;
			padding: 10rpx 24rpx 0 24rpx;
			background-color: #fff;
			text-align: center;
			color: #282F3E;
			font-size: 24rpx;

			.gui-bold {
				font-size: 30rpx;
			}

			.line-color1 {
				height: 8rpx;
				background-color: #f19ca3;
				margin-bottom: 10rpx;
				border-bottom-left-radius: 4rpx;
				border-bottom-right-radius: 4rpx;
				margin-top: 6rpx;
			}

			.line-color2 {
				height: 8rpx;
				background-color: #1c2d66;
				margin-bottom: 10rpx;
				border-bottom-left-radius: 4rpx;
				border-bottom-right-radius: 4rpx;
				margin-top: 6rpx;
			}
		}
			
		.bnt-item2{
			margin-right: 20rpx;
			flex: 1;
			box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.3);
			border-radius: 30rpx;
			padding: 20rpx 0;
			border: 1px solid transparent;
			text-align: center;
			font-size: 24rpx;
		}
		.bts1{
			background-color: #1c2d66;
			color: #ffffff;
		}
		.bts2{
			background-color: #ffffff;
			color: #1c2d66;
			border-color: #1c2d66;
		}
	}
	
	.content{
		margin-top: 20rpx;
		.c-item{
			box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.3);
			margin: auto 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			background: #ffffff;
			border-radius: 16rpx;
			padding: 24rpx;
			
			.bg-img {
			  width: 200rpx;
			  height: 200rpx;
			  border-radius: 50%;
			  overflow: hidden;
			  margin-right: 20rpx;
			}
			.c-title{
				font-size: 40rpx;
				font-weight: bold;
				margin-bottom: 16rpx;
			}
			.p-bnt{
				margin-top: 10rpx;
				padding: 6rpx 0;
				color: #ffffff;
				background-color: #1c2d66;
				text-align: center;
				width: 150rpx;
				font-size: 26rpx;
				border-radius: 20rpx;
			}
		}
	}
	.gui-accordion-icon {
		width: 50rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
	}
	
	.gui-accordion-title-text {
		width: 200rpx;
		line-height: 100rpx;
		flex: 1;
	}
</style>